import React from 'react';
import {lazyImg} from '../../assets/js/utils'
import Swiper from 'swiper/bundle';
import Css from '../../assets/css/benefit/index.css';
function hoc(WithComponent) {
    return class hocComponent extends React.Component{
        constructor(){
            super();
            this.state={
                bLouti0:false,
                bLouti1:true,
                bLouti2:true,
                bLouti3:false,
                bWelClick:true,
            }
            this.screnSwiper='';
            this.ecoSwiper='';
            this.approSwiper='';
            this.benPaasProps=this.benPaas.bind(this)
        }
        componentDidMount(){
            setTimeout(()=>{
                this.benscrenSwiper();
                this.echo();
                this.benEcoSwiper();
                this.benAppProSwiper()
            },200)
            window.addEventListener('scroll', this.benPaasProps)
        }
        //懒加载
        echo(){
            lazyImg()
        }
        //场景化Swiper
        benscrenSwiper(){
            this.screnSwiper = new Swiper('.ben_scren_cen_list', {
                preventClicksPropagation : true,
                slidesPerView: 3,
                spaceBetween: 0,
                loop:true,
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                freeMode : true,
                // freeModeMomentum : false,
                grabCursor : true,
                lazy: {
                    preloaderClass: Css['activeLoading'],
                    loadPrevNext: true,
                },
                navigation: {
                    nextEl: '.ben_scren_cen_list_prev',
                    prevEl:'.ben_scren_cen_list_next',
                },
            });
        }
        // PaaS+SaaS福利平台
        benPaas(){
            let wind=document.documentElement,
                // 向上滚动的高
                windScroll= wind.scrollTop,
                // 屏幕的高
                windScreen = wind.offsetHeight,
                // 获取元素
                louti= document.getElementById('louti0'),
                louti1= document.getElementById('louti1'),
                louti2= document.getElementById('louti2'),
                louti3= document.getElementById('louti3'),
                //获取元素距离顶部的高
                loutiOffTop=louti.offsetTop,
                loutiOffTop1=louti1.offsetTop,
                loutiOffTop2=louti2.offsetTop,
                loutiOffTop3=louti3.offsetTop,
                // 获取元素的高
                loutiHeight=louti.offsetHeight,
                loutiHeight1=louti1.offsetHeight,
                loutiHeight2=louti2.offsetHeight,
                loutiHeight3=louti3.offsetHeight,
                //获取元素滚动到屏幕中的距离
                loutiOffWin=loutiOffTop+loutiHeight-windScreen/2,
                loutiOffWin1=loutiOffTop1+loutiHeight1-windScreen/2,
                loutiOffWin2=loutiOffTop2+loutiHeight2-windScreen/2,
                loutiOffWin3=loutiOffTop3+loutiHeight3-windScreen/2,
                //判断元素是否滚动到屏幕中间
                bActive=loutiOffWin>windScroll,
                bActive1=loutiOffWin1>windScroll,
                bActive2=loutiOffWin2>windScroll,
                bActive3=loutiOffWin3>windScroll;
            if(bActive){
                this.setState({bLouti0:true,bLouti1:false,bLouti2:false,bLouti3:false})
            }else if(bActive1){
                this.setState({bLouti0:false,bLouti1:true,bLouti2:false,bLouti3:false})
            }else if(bActive2){
                this.setState({bLouti2:true,bLouti0:false,bLouti1:false,bLouti3:false})
            }else if(bActive3){
                this.setState({bLouti3:true,bLouti2:false,bLouti0:false,bLouti1:false})
            }else {
                this.setState({bLouti3:true,bLouti2:false,bLouti0:false,bLouti1:false})
            }
        }
        //福利体验点击查看更多log
        benWelClick(){
            this.setState({bWelClick:!this.state.bWelClick})
        }
        //福利生态swiper
        benEcoSwiper(){
            this.ecoSwiper = new Swiper('#gallery',{
                slidesPerView: 1,
                effect : 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                allowTouchMove: false,
                direction : 'vertical',
                pagination: {
                    el: '.ben_ecology_cen_swiper_big_pagination',
                    clickable :true,
                    bulletClass : Css['ben_ecology_cen_swiper_big_pagination_bullet'],
                    bulletActiveClass: Css['ben_ecology_cen_swiper_big_pagination_bullet_active'],
                },
                uniqueNavElements: false,
                thumbs: {
                    swiper: {
                        direction : 'vertical',
                        el: '#thumbs',
                        spaceBetween: 0,
                        slidesPerView: 'auto',
                        watchSlidesVisibility: true,
                        allowSlideNext : false,
                        allowSlidePrev : false,
                    },
                    slideThumbActiveClass: Css['ben_ecology_cen_swiper_small_active'],
                },
                lazy: {
                    loadPrevNext: true,
                    preloaderClass: Css['activeLoading'],
                },

            })
            if(this.ecoSwiper.pagination.bullets!==undefined){
                for(let i=0;i<this.ecoSwiper.pagination.bullets.length;i++){
                    this.ecoSwiper.pagination.bullets[i].onmouseover=function(){
                        this.click();
                    };
                }
            }
        }
        //鼠标经过福利生态swiper
        onMouseOver(index){
            this.ecoSwiper.slideTo(index,100,false)
        }
        //企业认可swiper
        benAppProSwiper(){
            this.approSwiper= new Swiper('.indCliSwiper', {
                slidesPerView: 6,
                spaceBetween: 60,
                freeMode: true,
                slidesPerGroup : 6,
                loop:true,
                lazy: {
                    preloaderClass: Css['activeLoading'],
                    loadPrevNext: true,
                },
                pagination: {
                    el: '.indCliSwiperSagination',
                    clickable: true,
                    bulletClass : Css['indCliAullet'],//需设置.my-bullet样式
                    bulletActiveClass: Css['indCliBulletActive'],
                },
                navigation: {
                    nextEl: '.indCliSwiperNext',
                    prevEl: '.indCliSwiperPrev',
                },
            });
        }
        //点击跳转页面
        goPages(url){
            let strUrl = "^(://)" +
                "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" +//ftp的user@+
                "(([0-9]{1,3}.){3}[0-9]{1,3}" +// IP形式的URL- 199.194.52.184 +
                "|" +// 允许IP和DOMAIN（域名） +
                "([0-9a-z_!~*'()-]+.)*" +// 域名- www. +
                "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." +// 二级域名 +
                "[a-z]{0,6})" +// first level domain- .com or .museum +
                "(:[0-9]{1,4})?" +// 端口- :80 +
                "((/?)|"  +// a slash isn't required if there is no file name +
                "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";

            let reg = new RegExp(strUrl);
            if (!reg.test(url)){
                window.open(url)
            }else {
                this.props.history.push(window.base.config.path+url)
            }
        }
        //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
        componentWillUnmount(){
            window.removeEventListener('scroll',this.benPaasProps)
            this.screnSwiper='';
            this.ecoSwiper='';
            this.approSwiper='';
            this.setState=(state,callback)=>{
                return;
            }
        }
        render(){
            let newsProps={
                goPage:this.goPages.bind(this),
                benWelClick:this.benWelClick.bind(this),
                onMouseOver:this.onMouseOver.bind(this),
                bLouti0:this.state.bLouti0,
                bLouti1:this.state.bLouti1,
                bLouti2:this.state.bLouti2,
                bLouti3:this.state.bLouti3,
                bWelClick:this.state.bWelClick,
            }
            return(
                <WithComponent {...this.props} {...newsProps}></WithComponent>
            )
        }
    }
}
export default hoc